<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <title>商品列表</title>
    <link rel="stylesheet" href="css/commm.css">
    <link rel="stylesheet" type="text/css" href="font/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/details.css"/>
    <style>
    .desc{
      font-size:14px;
      font-weight:bolder;
    }
   .details{
    height:701px;
  padding-top:17px;
  padding-left:15px;
  display:inline-block;
   position:relative;
   border-bottom: 1px solid gray;
   width:100%;
}
.det_img{
  width:20%;
}
.details a{
  width:100%;
  display:inline-block;
 height:100%;
}
.details .likea img{
  width:50%;
  height:50%;
  float:left;
}
.details .likea .details_add{
 font-size:10px;
 color:gray;
}
.details .likea .details_add .desc{
  font-size:14px;
   position:absolute;
   line-height:16px;
top:0px;
}
.details .likea .details_add .desc span{
 color:red;
}
.details .likea .details_add .price{
  position: absolute;
  bottom:0px;
  width:64%;
}
.details .likea .details_add .price span{
  position:absolute;
  /*display:block;*/
  right:0px;
}
      .feds{
        padding-top:20px;
        color:red;
      }
      .name{
        color:#ff6343;
      }
      .dates{
        color:#ff6343;
      }
      .com{
        margin-top:10px;
        border:1px solid gray;
      }
    </style>
</head>
<body>
  <header  class="header">
    <div class="top clearfix">
      <div class="hd_left"><img src="images/header_logo.png" alt=""></div>
      <div class="hd_right"><img src="images/header_app.png" alt=""></div>
    </div>
    <div class="input">
        <input type="search" placeholder="请输入你要搜索的文字">
        <a href="#"><span class="sousuo">搜索</span></a>
    </div>
  </header>


    <div class="index">
      <div class="fl clearfix" id="dianshi">
        <a href="#">首页&gt;</a>
        <a href="#">全部分类&gt;</a>
        <a href="#">电视&gt;</a>
      </div>
    </div>
  <div id="details_cont">
    <div class="details clearfix">
      <a href="dspl" class="clearfix">
        <div class="fl det_img">{{#value.productImg}}</div>
          <div class="fl details_add">
              <p class="desc fl">{{value.productName}}</p>
              <p class="fl feds">{{value.productPrice}}</p>
              <p class="price fl">{{value.productQuote}} {{value.productCom}}</p>
          </div>
          </a>
       </div>
  </div>
  <h4>平板电视最新评论</h4>
  <div id="com">
        <div class="author clearfix">
          <div class="name fl">wxf</div>
          <div class="dates fr">2017年3月2日11:23:30</div>
        </div>
        <p class="com">享受一段时间才评论。最大感触国产品牌创维挺棒的。画质     清晰，配上JBL音响，完美的家庭影院，最近周末很少出门啦。WIFI与我的NAS或电脑共享    对接，不怕没4K片源。配上手机版指尖到家，手机的图片，影音等可以直接电视播放。互    联功能很强大。与孩子一起互动玩射击游戏很不错。很多功能待挖掘。建议厂家开发功能    介绍的软体。软件很多，但还需要增加比如体育直播。AR是个不错的买点，可惜商家没提供配套设备，相当期待……                </p>
  </div>
    

    <div class="login">
        <ul class="clearfix">
          <a href="#"><li>登录</li></a>
          <a href="#"><li class="mid">注册</li></a>
          <a href="#"><li>返回首页</li></a>
        </ul>
    </div>
  </div>


    <p class="bot"><span class="reds">手机app下载</span> 慢慢买手机版 -- <span class="grays">掌上比价平台</span></p>
    <p class="bot">m.manmanbuy.com</p>



</body>
<script src="js/jquery.js"></script>
<script src="js/template.js"></script>
<script type="text/html" id="brand-info">
{{if result}}
{{each result as value}}
  <div class="details clearfix">
       <div class="likea clearfix">
        <div class="fl det_img">{{#value.productImg}}</div>
          <div class="fl details_add">
              <p class="desc fl">{{value.productName}}</p>
              <p class="fl feds">{{value.productPrice}}</p>
              <p class="price fl">{{value.productQuote}} {{value.productCom}}</p>
          </div>
      </div>
    </div>
  {{/each}}
  {{/if}}
</script>
<script type="text/html" id="tv-com">
{{if result}}
{{each result as value}}
    <div class="author clearfix">
          <div class="name fl">{{value.comName}}</div>
          <div class="dates fr">{{value.comTime}}</div>
        </div>
        <p class="com">{{value.comContent}}</p>
  {{/each}}
  {{/if}}
</script>
<script>
  (function(){
    $(function(){
      var adr = window.location.search;
      $.ajax({
        // url:"http://192.168.23.25:3000/api/getbrandproductlist?brandtitleid=0&pagesize=4",

        url:"http://192.168.23.25:3000/api/getbrandproductlist"+adr+"&pagesize=4",
        type:'get',
        datatype:'jsonp',
        success:function(data){
            var html = template("brand-info",data);
            $("#details_cont").html(html);
            $("#details_cont").children().each(function(i,v){
              $(this).click(function(){
                var pd=data.result[i].productId
                $.ajax({
                  url:"http://192.168.23.25:3000/api/getproductcom?productid="+pd+"",
                  type:'get',
                  datatype:'jsonp',
                  success:function(data){
                        var html = template("tv-com",data);
                        $("#com").html(html);
                  }
                })
              })
            })
        }
      })
    })
  })()
</script>
<!-- <script>
  console.log($("#weiyi option:selected").val());
</script> -->
</html>
